<link href="__CDN__/assets/css/app_new.css" rel="stylesheet" />
<style>
  .assess-footer button.u-bg-grey {
    background: linear-gradient(228deg, #d5d5d5 0, #d5d5d5 100%);
  }
</style>
<div class="all-container">
  <div class="login-register-header">
    <div class="back-btn">
      <a href="javascript:history.go(-1)"
        ><img src="__CDN__/map/images/return@2x.png" alt="返回"
      /></a>
    </div>
    <div class="am-tabs" data-am-tabs="{noSwipe: 1}" id="doc-tab-demo-2">
      <div class="invite-header-c d-flex">
        <span class="add-agent-title">评价</span>
      </div>
    </div>
  </div>
  <div class="assess-f-1">
    <textarea
      class="textarea"
      maxlength="200"
      name="content"
      placeholder="您输入您的评价内容"
      id="content"
    ></textarea>

    <p><i id="num">0</i>/200</p>
  </div>
  <hr />
  <div class="assess-f-2">
    <div class="d-flex">
      <p>您对TA的评价</p>
      <span>满意请给五星好评哦</span>
    </div>
    <ul class="stares">
      <li>
        <img
          src="__CDN__/map/images/assess_06.png"
          onclick="img(this)"
          id="1"
          alt="星星"
        />
      </li>
      <input
        type="hidden"
        name="litestore_shop_id"
        value="{$litestore_shop_id}"
      />
      <input
        type="hidden"
        name="litestore_shoporder_id"
        value="{$litestore_shoporder_id}"
      />
      <input type="hidden" name="psoce" value="1" id="psoce" />
      <li>
        <img
          src="__CDN__/map/images/assess_03.png"
          onclick="img(this)"
          id="2"
          alt="星星"
        />
      </li>
      <li>
        <img
          src="__CDN__/map/images/assess_03.png"
          onclick="img(this)"
          id="3"
          alt="星星"
        />
      </li>
      <li>
        <img
          src="__CDN__/map/images/assess_03.png"
          onclick="img(this)"
          id="4"
          alt="星星"
        />
      </li>
      <li>
        <img
          src="__CDN__/map/images/assess_03.png"
          onclick="img(this)"
          id="5"
          alt="星星"
        />
      </li>
    </ul>
    <!--<ul>-->
    <!--<li onclick="msgt(this)">聊天敷衍了事</li>-->
    <!--<li onclick="msgt(this)">不露脸</li>-->
    <!--<li onclick="msgt(this)">不出声</li>-->
    <!--<li onclick="msgt(this)">不断要礼物</li>-->
    <!--<li onclick="msgt(this)">提醒到其他平台</li>-->
    <!--</ul>-->
    <div class="assess-footer">
      <button id="gradualBg" class="u-bg-grey">提交</button>
    </div>
  </div>
</div>

<script>
  var img1 = "{$http_url}map/images/assess_03.png"
  var img2 = "{$http_url}map/images/assess_06.png"

  function img(obj) {
    var thisObj = $(obj) //js对象转jquery对象
    var li_obj = $(".stares li img")

    $("#psoce").val(obj.id)
    if (obj.src == img1) {
      $.each(li_obj, function(k, v) {
        if (obj.id < $(v).attr("id")) {
          $(v).attr("src", img1)
        } else {
          $(v).attr("src", img2)
        }
      })
      thisObj.attr("src", img2)
    } else if (obj.src == img2) {
      $.each(li_obj, function(k, v) {
        if (obj.id < $(v).attr("id")) {
          $(v).attr("src", img1)
        } else {
          $(v).attr("src", img2)
        }
      })
      thisObj.attr("src", img1)
    }
  }

  // function msgt(obj) {
  //     var thisObj=$(obj);//js对象转jquery对象
  //     if(thisObj.attr('class')==undefined||thisObj.attr('class')==''){
  //         $('li').removeClass('active');
  //         thisObj.attr('class','active')
  //         $('#content').val(thisObj.html())
  //
  //     }else if(thisObj.attr('class')=='active'){
  //         thisObj.removeClass('active')
  //     }
  //
  // }

  $('.assess-f-1').on("input", ".textarea", function() {
    let that = $(this)
    let valLength = that.val().length
    $("#num").text(valLength)
    if (valLength >= 1) {
      $("#gradualBg").removeClass("u-bg-grey")
    } else if (valLength === 0) {
      $("#gradualBg").addClass("u-bg-grey")
    }
  })
</script>
<script>
  $("#gradualBg").on("click", function() {
    var content = $("textarea[name='content']").val()
    var psoce = $("input[name='psoce']").val()
    var litestore_shop_id = $("input[name='litestore_shop_id']").val()
    var litestore_shoporder_id = $("input[name='litestore_shoporder_id']").val()
    $.ajax({
      type: "POST",
      url: "{$http_url}/index/user/comment",
      dataType: "json",
      data: {
        content: content,
        litestore_shop_id: litestore_shop_id,
        litestore_shoporder_id: litestore_shoporder_id,
        psoce: psoce
      },
      success: function(data) {
        if (data.code > 0) {
          alert(data.msg)
          javascript: history.go(-1)
        } else {
          alert(data.msg)
        }
      },
      error: function(jqXHR) {
        console.log("Error: " + jqXHR.status)
      }
    })
  })
</script>
